<template>
<div>
  <van-checkbox-group v-model="result" label-disabled>
  <van-checkbox :name="item.gid" v-for="item in goodsitem" :key="item.gid" @click="changChecked(item)" label-disabled>

        <ul class="goodsul">
          <li>设备名称:<span>{{item.gname}}</span></li>
          <li>设备型号:<span>{{item.gmodel}}</span></li>
          <li>设备品牌:<span>{{item.bandname}}</span>可申数量:<span>{{item.kucun}}</span></li>
          <li>查看描述
          </li>
        
    </ul>
  <!-- <van-card 
  num="2"
  price=""
  :desc=item.gname
  :title=item.gmodel
  thumb=""
/> -->
</van-checkbox>
</van-checkbox-group>
<van-submit-bar :price="price" currency="" decimal-length="1" button-text="下一步" @submit="gotodj">
  <van-checkbox v-model="checkedAll">全选</van-checkbox>
    <template #tip>
     <span @click="onClickEditCart">编辑</span>
  </template>
</van-submit-bar>
</div>
</template>

<script>
export default {
  data() {
    return {
      //选中的数组
      result: [],
      price:0,
      goodsitem: [
        { gid: 1, gname: '接入交换机', gmodel: '1jfsdfosofhsofhshfdshfdish', bandname: 'huawei', kucun: 21, danxuan: false,checked:1 },
        { gid: 2, gname: '接入交换机', gmodel: '2jfsdfosofhsofhshfdshfdish', bandname: 'huawei', kucun: 21, danxuan: false,checked:1 },
        { gid: 3, gname: '接入交换机', gmodel: '3jfsdfosofhsofhshfdshfdish', bandname: 'huawei', kucun: 21, danxuan: false,checked:1 },
        { gid: 4, gname: '接入交换机', gmodel: '4jfsdfosofhsofhshfdshfdish', bandname: 'huawei', kucun: 21, danxuan: false,checked:1 },
        { gid: 5, gname: '接入交换机', gmodel: '5jfsdfosofhsofhshfdshfdish', bandname: 'huawei', kucun: 21, danxuan: false,checked:1 },
        { gid: 6, gname: '接入交换机', gmodel: '6jfsdfosofhsofhshfdshfdish', bandname: 'huawei', kucun: 21, danxuan: false,checked:1 },

      ],
    }
  },
  computed:{
    checkedAll:{
      get(){
        return this.goodsitem.length==this.result.length
      },
      set(val){
        let check=0;
        console.log(val);
        val==true?false:true;
        if(val==true){
          check=1
        }
        this.result=[];
        this.goodsitem.map(item=>{
          item.checked=check;
          if(val){            
            this.result.push(item.gid);
          }
        });
        this.price=this.result.length*100;
      }
      
    }
  },
  created(){
    this.goodsitem.map(item=>{
      item.checked==1?this.result.push(item.gid):'';
      this.price=this.result.length*100;
    });
  },
  methods:{
    changChecked(item){
      console.log(item.checked);
      if(item.checked==0){
        item.checked=1
      }else{
        item.checked=0
      }
      // item.checked==0?1:0;
      console.log(item.checked);
      if(item.checked==0){
           for(var i = 0; i < this.result.length; i++) {
              if(this.result[i] == item.gid) {
                this.result.splice(i, 1);
                break
              }
           }
      }else{
        this.result.push(item.gid)
      }
      console.log(this.result);
      this.goodsitem.map(gitem=>{
      if(gitem.gid==item.gid){
        gitem.checked=item.checked
      }
      this.price=this.result.length*100;
    })
    
        // this.goodsitem.map(item=>{
        //   ids_arr.push(item.gid)
        // })
    },
    gotodj(){

    },
    onClickEditCart(){

    }
  }
}
</script>

<style>
/* body {
  background-color: #fafafa;
} */
.van-checkbox__label{
  /* flex:1; */
}
.van-card{
  background-color: #fff;
}
.van-checkbox-group .van-checkbox{
   background-color: #fff;
   padding: .1rem .15rem;
   border-bottom: 1px solid #ccc;
}
</style>
